<!-- ----------------------------
--  @author: 野狼上校           --
--  @create: 2024-07-20 13:44  --
--  @version: 1.0              --
-------------------------------->
<!-- 预警详情 -->

<template>
  <el-breadcrumb :separator-icon="DArrowRight" style='font: normal bold 1.1rem "Fira Sans", serif;'>
    <el-breadcrumb-item v-for="(item, index) in items" :key="index">{{ item }}</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider/>

  <!-- 列表数据 -->
  <el-row :gutter="20" class="my-table">
    <el-col :span="4">
      {{ deviceGuid }}：预警详情
    </el-col>
    <el-col :span="16">
    </el-col>
    <el-col :span="4">
    </el-col>
  </el-row>

  <!--  表格数据  -->
  <el-table :data="alarmRecords" stripe border style="width: 100%">
    <el-table-column prop="deviceGuid" label="设备Id" width="120" align="center"/>
    <el-table-column prop="productionLine" label="生产产线" width="120" align="center"/>
    <el-table-column prop="machineName" label="机床名称" width="120" align="center"/>
    <el-table-column prop="photoUrl" label="图片" width="120" align="center"/>
    <el-table-column prop="alarmDesc" label="预警处理详情" width="120" align="center"/>
    <el-table-column prop="createTime" label="创建时间" width="120" align="center"/>
    <el-table-column prop="alarmStatus" label="预警记录状态" width="120" align="center">
      <template #default="{row}">
        <!-- 当 deviceStatus 为 0 时 -->
        <el-tag v-if="row.alarmStatus === 0" size="large" type="danger">
          <span>未处理</span>
        </el-tag>
        <!-- 当 deviceStatus 为 1 时 -->
        <el-tag v-else-if="row.alarmStatus === 1" size="large" type="success">
          <span>已处理</span>
        </el-tag>
        <!-- 当 deviceStatus 为 2 时 -->
        <el-tag v-else-if="row.alarmStatus === 2" size="large" type="warning">
          <span>未清除</span>
        </el-tag>
        <!-- 如果需要处理其他情况（可选） -->
        <el-tag v-else size="small" type="info">
          <span>未知状态</span>
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="action" label="操作" min-width="300px" fixed="right" align="center">
      <template v-slot="scope">
        <!--     预警处理     -->
        <el-button v-if="scope.row.alarmStatus === 0" type="danger" :icon="Setting"
                   @click="alarmRecordHandler(scope.row.id)">处理预警
        </el-button>
        <el-button v-else-if="scope.row.alarmStatus === 1" type="success" :icon="Setting">处理完成</el-button>

        <el-button v-else-if="scope.row.alarmStatus === 2" type="primary" :icon="Setting"
                   @click="alarmRecordClear(scope.row.id)">清除预警
        </el-button>

      </template>
    </el-table-column>
  </el-table>

</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {DArrowRight, Setting} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {SUCCESS} from "@/utils/constants.ts";
import {RespResult} from "@/api";
import {clearAlarmAndUpdateAlarmRecordStatus, getAlarmRecordsByDeviceGuid} from "@/api/crash/alarmRecord.ts";
import router from "@/router";

const breadcrumb: any = useRoute().meta.title;
const items: string[] = breadcrumb.split(",");

/*表格数据*/
const alarmRecords = ref([]);

const deviceGuid = ref()


/*详情数据*/
onMounted(() => {
  // 获取参数
  deviceGuid.value = useRoute().query.deviceGuid;
  initAlarmRecordsData(deviceGuid.value);
})

const initAlarmRecordsData = async (deviceGuid: string) => {
  //发送请求
  await getAlarmRecordsByDeviceGuid({deviceGuid: deviceGuid}).then(
      (response: RespResult) => {
        if (response.code === SUCCESS) {
          alarmRecords.value = JSON.parse(response.data);
        } else {
          ElMessage({
            message: "获取数据失败",
            type: 'error'
          })
        }
      }
  )
}

/*详情*/
const alarmRecordHandler = (id: number) => {
  // 跳转
  router.push({path: "/alarmHandler", query: {id: id}});
}

/* 清除预警 */
const alarmRecordClear = (id: number) => {
  clearAlarmAndUpdateAlarmRecordStatus({
    id: id,
  }).then(
      (response: RespResult) => {
        if (response.code === SUCCESS) {
          ElMessage({
            message: "清除预警成功",
            type: 'success'
          })
          initAlarmRecordsData(deviceGuid.value);
        } else {
          ElMessage({
            message: "清除预警失败",
            type: 'error'
          })
        }
      }
  )
}

</script>

<style scoped>

.my-table {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
}

</style>